import React, {Component} from 'react';
import PropTypes from 'prop-types'
import { List } from 'antd-mobile';
import { NavBar, Icon, Drawer} from 'antd-mobile';
import 'antd-mobile/dist/antd-mobile.css';
import { withRouter } from "react-router-dom"
import SendText from '../components/SendText'
import ChatDisplay from '../components/ChatDisplay'
class FriendChat extends Component {
  static propTypes = {
    sendMessage:PropTypes.func.isRequired,
    friendState:PropTypes.object.isRequired,
    setIsOpenChat:PropTypes.func.isRequired,
  }


  onOpenChange(that) {
    console.log("click");
    this.props.setIsOpenChat(false);
    if(this.props.timeState.timer!= null) {
      clearInterval(this.props.timeState.timer);
      }
      
  }
  render = ()=>
      <div>
        <NavBar className = "my-bar" 
      mode="dark"
      leftContent={[
        <Icon onClick={()=>{this.onOpenChange(this);}} key="0" type="left" style={{ marginRight: '16px' }} />
      ]}
      rightContent={[
        <Icon onClick={()=>console.log("onclick")} key="0" type="search" style={{ marginRight: '16px' }} />,
        <Icon key="1" type="ellipsis" />,
      ]}
     >Your Father</NavBar>
          <ChatDisplay chatState = {this.props.friendState}/>
          <SendText sendMessage = {this.props.sendMessage} chatState = {this.props.friendState} login ={this.props.login} friendState={this.props.friendState} sendChatMessage={this.props.sendChatMessage}
          fetchFriendMessage = {this.props.fetchFriendMessage}/>
      </div>
}
export default FriendChat